<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="" :inline="true" v-show="showSearch" label-width="68px">
     <el-form-item label="关键字" prop="keyword">
       <el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable @keyup.enter.native="handleQuery" />
     </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="ZoomIn" size="" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" size="" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" size="" @click="proxy.$refs['myDialogRef'].open()">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-popconfirm
          title="确定删除吗？"
          @confirm="del"
        >
        <template #reference>
          <el-button :disabled="!selects.length" type="danger" plain icon="Delete"
           size="">删除</el-button>
        </template>
        </el-popconfirm>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="tableList"  @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column label="序号" type="index" width="50" align="center">
        <template  #default="scope">
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="KEY" align="center" prop="configKey" :show-overflow-tooltip="true"/>
      <el-table-column label="名称" align="center" prop="configName" :show-overflow-tooltip="true"/>
      <el-table-column label="描述" align="center" prop="remark" :show-overflow-tooltip="true"/>
      <el-table-column label="创建时间" align="center" prop="createTime"/>
      <el-table-column label="操作" align="center" class-name="-padding fixed-width">
        <template  #default="scope">
          <el-button type="primary" link size="" icon="EditPen" @click="proxy.$refs['myDialogRef'].open(scope.row)"
          >编辑</el-button>
          <el-popconfirm
            title="确定删除吗？"
            @confirm="del([scope.row.id])"
          >
          <template #reference><el-button type="danger" link style="margin-left: 20px;" size="" icon="Delete">删除</el-button></template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <my-dialog ref="myDialogRef" @getList="getList"/>
  </div>
</template>
<script setup name='ImportConfig'>
 import { ElMessage } from "element-plus";
 import {
    listTable,batchDeleteByIds
  } from "@/api/tool/importExport";
  import myDialog from "./components/dialog.vue";
  const { proxy } = getCurrentInstance();
  const loading = $ref(true),
        // 显示搜索条件
        showSearch = $ref(true),
        // 总条数
        total=$ref(0),
        // 表数据
        tableList=$ref([]),
        // 查询参数
        queryParams=$ref({
          pageNum: 1,
          pageSize: 10,
          keyword: undefined,
        }),
        selects=$ref([])

    function getList() {
        loading = true;
        listTable(queryParams).then(response => {
          if (response.code == 200) {
            tableList = response.rows;
            total = response.total;
          }
        }).finally(() => {
          loading = false;
        })
      }
    //多选
    function handleSelectionChange(e){
        selects=e
    }
    function handleQuery(){
        queryParams.pageNum = 1;
        getList();
    }
    function resetQuery() {
      proxy.resetForm("queryForm");
       handleQuery();
    }
    function del(ids){
        if(!ids){
          ids=selects.map(item=>{
            return item.id
          })
        }
          batchDeleteByIds(ids).then(res=>{
            if(res.code==200){
              ElMessage({
                message: '删除成功',
                type: 'success',
            })
              getList()
            }
          })
       }
      getList()   

</script>
<style lang="scss" scoped>

</style>
